import classNames from 'classnames'
import { ReactNode } from 'react'
import style from './index.module.scss'

interface Props
  extends React.DetailedHTMLProps<
    React.InputHTMLAttributes<HTMLInputElement>,
    HTMLInputElement
  > {
  extra?: ReactNode
  className?: string
  errMsg?: string
}

export default function Input({ extra, className, errMsg, ...rest }: Props) {
  return (
    <div className={style.root}>
      <input
        {...rest}
        className={classNames('input', className)}
        // type={type}
        // name="code"
        // placeholder={placeholder}
        // maxLength={6}
        // autoComplete="off"
      />
      {errMsg ? <div className="validate">{errMsg}</div> : null}
      {extra ? <div className="extra">{extra}</div> : null}
    </div>
  )
}
